<template>
	<view class="backgroundStyle" :style="'height:' +  height + 'rpx;'">
		<u-toast ref="uToast" />
		<view>
			<navigator open-type="navigateBack" hover-class="other-navigator-hover">
				<u-icon name="close" color="#82848a" size="35" style="margin: 30rpx 30rpx 30rpx 30rpx;"></u-icon>
			</navigator>
		</view>
		<view class="content">
			<view class="logo">
				<image src="../../../static/logo.png" mode=""></image>
			</view>
			<u-form :model="alterFormData" ref="uForm">
				<u-form-item :label-style="color" label="邮箱:" label-width="110upx" prop="userEmail" required>
					<u-input type="tel" class="uni-input" v-model="alterFormData.userEmail" placeholder="请输入邮箱" />
				</u-form-item>
				<view class="uni-column column-with-btn">
					<u-form-item :label-style="color" label="验证码:" label-width="110upx" prop="etc.alterVerifyCode" required>
						<u-input class="uni-input" v-model="alterFormData.etc.alterVerifyCode" placeholder="请输入验证码" maxlength="4" />
						<u-button :class="{active : !disableCodeBtn}" :disabled="disableCodeBtn" @tap="sendCode">{{codeBtn.text}}</u-button>
					</u-form-item>
				</view>
				<view class="uni-column">
					<u-form-item :label-style="color" label="新密码:" label-width="110upx" prop="userPassword" required>
						<u-input type="password" class="uni-input" v-model="alterFormData.userPassword" placeholder="请输入新密码" />
					</u-form-item>
				</view>
			</u-form>
			<u-button ripple style="background-color: #00a0ff; margin-top: 20rpx;" @tap="alterPassword" type="primary">确认</u-button>
		</view>

	</view>
</template>

<script>
	import {
		sendLoginCode,
		alterPassword
	} from "@/api/modules/loginRegister";

	export default {
		data() {
			return {
				color:{
					color:"#ffffff"
				},
				height: '',
				captchaImg: '',
				seconds: 60,
				codeBtn: {
					text: '获取验证码',
					waitingCode: false,
					count: this.seconds,
				},
				alterFormData: {
					userEmail: '',
					userPassword: '',
					etc: {
						alterVerifyCode: ''
					},
				},
				rules: {
					userEmail: [{
							required: true,
							message: '请输入邮箱',
							trigger: 'blur',
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// this.$u.test.mobile()就是返回true或者false的
								return this.$u.test.email(value);
							},
							message: '邮箱格式不正确',
							// 触发器可以同时用blur和change
							trigger: 'blur',
						}
					],
					//这个正则有问题，先不搞了
					/* 'etc.registerVerifyCode': [{
						required: true,
						message: '请输入验证码',
						trigger: 'blur',
						}], */
					// this.$u.test.enOrNum('uView')
					userPassword: [{
							required: true,
							message: '请输入密码',
							trigger: 'blur',
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// this.$u.test.mobile()就是返回true或者false的
								return this.$u.test.enOrNum(value);
							},
							message: '只能数字或字母',
							// 触发器可以同时用blur和change
							trigger: 'blur',
						}
					],
				}
			}
		},
		onLoad() {},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			alterPassword: function() {
				this.$refs.uForm.validate(valid => {

					if (valid) {
						alterPassword({
								...this.alterFormData
							})
							.then(resp => {
								this.toast(resp.message, 1)
								setTimeout(function() {
									uni.navigateTo({
										url: './login',
									})
								}, 1000);
							})
							.catch(resp => {
								//this.toast(resp.message, 2)
							})
					} else {
						/* this.$refs.uToast.show({
							title: '验证失败',
							// 如果不传此type参数，默认为default，也可以手动写上 type: 'default'
							type: 'error',
							// 如果不需要图标，请设置为false
							duration: '1000',
						}) */
					}
				});
			},
			sendCode: function() {
				let valid = this.$u.test.email(this.alterFormData.userEmail)
				if (valid) { //验证通过
					sendLoginCode(this.alterFormData.userEmail)
						.then(resp => {
							this.codeBtn.waitingCode = true;
							this.codeBtn.count = this.seconds;
							this.codeBtn.text = this.codeBtn.count + 's';
							let countdown = setInterval(() => {
								this.codeBtn.count--;
								this.codeBtn.text = this.codeBtn.count + 's';
								if (this.codeBtn.count < 0) {
									clearInterval(countdown);
									this.codeBtn.text = '重新发送';
									this.codeBtn.waitingCode = false;
								}
							}, 1000);
							this.toast(resp.message, 1)
						})
						.catch(resp => {
							this.toast(resp.message, 2)
						})
					//   alert('submit!');
				} else { //验证失败
					this.$refs.uToast.show({
						title: '请输入正确的邮箱',
						// 如果不传此type参数，默认为default，也可以手动写上 type: 'default'
						type: 'error',
						// 如果不需要图标，请设置为false
						duration: '1000',
					})
				}
			},
			gotoLogin: function() {
				uni.navigateBack({
					url: 'login'
				})
			}
		},
		computed: {
			disableCodeBtn: function() {
				return this.codeBtn.waitingCode;
			}
		},
		mounted() {
			const res = uni.getSystemInfoSync();
			this.height = res.windowHeight * 750 / res.windowWidth
		}
	}
</script>

<style lang="scss" scoped>
	$color-primary: #00a0ff;

	.backgroundStyle {
		background-image: linear-gradient(35deg, #371b6e, #4d4c85, #5e7b9c, #69adb3);
	}

	.content {
		padding: 60upx 90upx 90upx;
	}

	.logo {
		text-align: center;

		image {
			height: 200upx;
			width: 200upx;
			margin: 0 0 40upx;
		}
	}

	.uni-form-item {
		margin-bottom: 40upx;
		padding: 0;
		border-bottom: 1px solid #e3e3e3;

		.uni-input {
			font-size: 30upx;
			padding: 7px 0;
		}
	}

	.column-with-btn {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;

		button {
			font-size: 25upx;
			margin: 0;
			width: 180upx;
			text-align: center;

			&:after {
				border: none
			}

			&.active {
				background-color: $color-primary;
				color: $uni-text-color-inverse;
			}
		}
	}

	.img-captcha {
		width: 150upx;
		height: 60upx;
	}

	button[type="primary"] {
		background-color: $color-primary;
		border-radius: 0;
		font-size: 34upx;
		margin-top: 60upx;
	}

	.links {
		text-align: center;
		margin-top: 40upx;
		font-size: 26upx;
		color: #999;

		view {
			display: inline-block;
			vertical-align: top;
			margin: 0 10upx;
		}

		.link-highlight {
			color: $color-primary
		}
	}
</style>
